<template>
  <view class="edit-container">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="nav-left" @click="goBack">
        <text class="back-icon">←</text>
        <text>返回</text>
      </view>
      <text class="title">产品编辑</text>
      <view class="nav-right"></view>
    </view>

    <!-- 加载状态 -->
    <view class="loading-mask" v-if="loading">
      <view class="loading-content">
        <text class="loading-text">加载中...</text>
      </view>
    </view>

    <!-- 表单内容 -->
    <scroll-view class="form-container" scroll-y>
      <view class="form-content">
        <!-- 操作按钮区域（固定在顶部） -->
        <view class="sticky-actions">
          <view class="action-buttons">
            <button class="primary-btn" @click="saveProduct">保存</button>
            <button class="secondary-btn" @click="viewWiringDiagram">查看主接线图</button>
          </view>
        </view>

        <!-- 图片上传区域 -->
        <view class="form-section">
          <view class="section-title">图片信息</view>
          <view class="image-upload-section">
            <view class="image-item">
              <text class="image-label">图片1</text>
              <view class="image-preview" v-if="productDetail && productDetail.image1Url">
                <image :src="productDetail.image1Url" mode="aspectFill" class="preview-image" />
                <view class="image-actions">
                  <button class="action-btn" @click="handleChooseImage(1)">更换图片</button>
                  <button class="action-btn delete-btn" @click="handleDeleteImage(1)">删除</button>
                </view>
              </view>
              <view class="image-upload" v-else @click="handleChooseImage(1)">
                <text class="upload-text">+</text>
                <text class="upload-hint">上传图片1</text>
              </view>
            </view>

            <view class="image-item">
              <text class="image-label">图片2</text>
              <view class="image-preview" v-if="productDetail && productDetail.image2Url">
                <image :src="productDetail.image2Url" mode="aspectFill" class="preview-image" />
                <view class="image-actions">
                  <button class="action-btn" @click="handleChooseImage(2)">更换图片</button>
                  <button class="action-btn delete-btn" @click="handleDeleteImage(2)">删除</button>
                </view>
              </view>
              <view class="image-upload" v-else @click="handleChooseImage(2)">
                <text class="upload-text">+</text>
                <text class="upload-hint">上传图片2</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 基本信息 -->
        <view class="form-section" v-if="productDetail">
          <view class="section-title">基本信息</view>
          <view class="form-item">
            <text class="label">产品序列号</text>
            <input class="input" v-model="productDetail.productSNo" placeholder="请输入产品序列号" :disabled="true" />
          </view>
          <view class="form-item">
            <text class="label">设备标识</text>
            <input class="input" v-model="productDetail.deviceId" placeholder="请输入设备标识" />
          </view>
          <view class="form-item">
            <text class="label">通信模式</text>
            <picker 
              mode="selector" 
              :range="communicationModes" 
              @change="onCommunicationModeChange"
              class="picker-input"
            >
              <view class="picker-display">
                <text class="picker-text">{{ productDetail.communicationMode || '请选择通信模式' }}</text>
                <text class="picker-arrow">▼</text>
              </view>
            </picker>
          </view>
          <view class="form-item">
            <text class="label">客户端ID</text>
            <input class="input" v-model="productDetail.clientId" placeholder="请输入客户端ID" />
          </view>
          <view class="form-item">
            <text class="label">用户名</text>
            <input class="input" v-model="productDetail.username" placeholder="请输入用户名" />
          </view>
          <view class="form-item">
            <text class="label">密码</text>
            <input class="input" v-model="productDetail.password" placeholder="请输入密码" password />
          </view>
          <view class="form-item">
            <text class="label">安装地点</text>
            <input class="input" v-model="productDetail.installationLocation" placeholder="请输入安装地点" />
          </view>
          <view class="form-item">
            <text class="label">应用场景</text>
            <picker 
              mode="selector" 
              :range="applicationScenarios" 
              @change="onApplicationScenarioChange"
              class="picker-input"
            >
              <view class="picker-display">
                <text class="picker-text">{{ productDetail.applicationScenario || '请选择应用场景' }}</text>
                <text class="picker-arrow">▼</text>
              </view>
            </picker>
          </view>
        </view>

        <!-- 变压器信息 -->
        <view class="form-section" v-if="productDetail">
          <view class="section-title">变压器信息</view>
          <view class="form-item">
            <text class="label">10kV线路名称</text>
            <input class="input" v-model="productDetail.line10kvName" placeholder="请输入10kV线路名称" />
          </view>
          <view class="form-item">
            <text class="label">变压器名称</text>
            <input class="input" v-model="productDetail.transformerName" placeholder="请输入变压器名称" />
          </view>
          <view class="form-item">
            <text class="label">额定容量</text>
            <input class="input" v-model="productDetail.transformerRatedCapacity" placeholder="请输入额定容量（单位kVA）" type="digit" />
          </view>
          <view class="form-item">
            <text class="label">变比</text>
            <input class="input" v-model="productDetail.transformerRatio" placeholder="请输入变比" type="digit" />
          </view>
        </view>

        <!-- 线路信息 -->
        <view class="form-section" v-if="productDetail">
          <view class="section-title">线路信息</view>
          
          <!-- 出线数量选择 -->
          <view class="form-item">
            <text class="label">出线数量</text>
            <view class="outlet-selector">
              <view 
                v-for="num in 8" 
                :key="num"
                class="outlet-option"
                :class="{ active: productDetail.lineNum === num }"
                @click="selectOutletCount(num)"
              >
                {{ num }}路
              </view>
            </view>
          </view>
          
          <!-- 动态线路配置 -->
          <view v-if="productDetail.lineNum > 0">
            <view v-for="i in productDetail.lineNum" :key="i" class="line-config-section">
              <view class="line-title">线路{{ i }}</view>
              <view class="form-item">
                <text class="label">线路名称</text>
                <input class="input" v-model="productDetail[`line${i}Name`]" placeholder="请输入线路名称" />
              </view>
              <view class="form-item">
                <text class="label">额定容量</text>
                <input class="input" v-model="productDetail[`line${i}RatedCapacity`]" placeholder="请输入额定容量（单位kVA）" type="digit" />
              </view>
              <view class="form-item">
                <text class="label">变比</text>
                <input class="input" v-model="productDetail[`line${i}Ratio`]" placeholder="请输入变比" type="digit" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
// 引入配置文件
import config from '../../config/index.js'
export default {
  data() {
    return {
      productSNo: '',
      productDetail: null,
      loading: false,
      //baseURL: 'http://localhost:8081/api'
      communicationModes: ['无线公网', '无线专网'],
      applicationScenarios: ['配电变压器', '配电分支箱', '个人/家庭', '充电桩', '其他应用']
    };
  },

  onLoad: function(options) {
    console.log('编辑页面参数:', options);
    if (options && options.productSNo) {
      this.productSNo = decodeURIComponent(options.productSNo);
      console.log('产品序列号:', this.productSNo);
      this.loadProductDetail();
    } else {
      console.error('未获取到产品序列号参数');
      uni.showToast({
        title: '参数错误',
        icon: 'none'
      });
    }
  },

  methods: {
	      // 保存图片URL到数据库的方法
	      saveImageUrlToDatabase: async function(imageIndex, imageUrl) {
	        try {
	          console.log('开始保存图片URL到数据库');
	          console.log('产品序列号:', this.productDetail.productSNo);
	          console.log('图片索引:', imageIndex);
	          console.log('图片URL:', imageUrl);
	          
	          // 构造更新数据
	          const updateData = {
	            productSNo: this.productDetail.productSNo
	          };
	          
	          if (imageIndex === 1) {
	            updateData.image1Url = imageUrl;
	          } else if (imageIndex === 2) {
	            updateData.image2Url = imageUrl;
	          }
	          
	          console.log('准备更新的数据:', updateData);
	          
	          const token = uni.getStorageSync('token');
	          const res = await new Promise((resolve, reject) => {
	            uni.request({
	              url: `${config.baseURL}/productDetail/updateImageUrl`, // 使用专门的接口
	              method: 'POST',
	              data: updateData,
	              header: {
	                'Authorization': `Bearer ${token}`,
	                'Content-Type': 'application/json'
	              },
	              success: (result) => {
	                console.log('保存图片URL成功:', result);
	                resolve(result);
	              },
	              fail: (error) => {
	                console.error('保存图片URL失败:', error);
	                reject(error);
	              }
	            });
	          });
	          
	          if (res && res.statusCode === 200 && res.data && res.data.code === 0) {
	            console.log('图片URL保存成功');
	          } else {
	            console.error('图片URL保存失败:', res);
	          }
	        } catch (error) {
	          console.error('保存图片URL异常:', error);
	        }
	      },
    goBack: function() {
      uni.navigateBack();
    },

    loadProductDetail: function() {
      if (!this.productSNo) {
        console.error('产品序列号为空');
        return;
      }

      this.loading = true;
      this._loadProductDetailImpl();
    },

    _loadProductDetailImpl: async function() {
      try {
        const token = uni.getStorageSync('token');
        console.log('请求URL:', `${config.baseURL}/productDetail/getByProductSNo/${this.productSNo}`);
        
        const res = await new Promise((resolve, reject) => {
          uni.request({
            url: `${config.baseURL}/productDetail/getByProductSNo/${this.productSNo}`,
            method: 'GET',
            header: {
              'Authorization': `Bearer ${token}`,
              'Content-Type': 'application/json'
            },
            success: (result) => {
              console.log('请求成功:', result);
              resolve(result);
            },
            fail: (error) => {
              console.error('请求失败:', error);
              reject(error);
            }
          });
        });

        console.log('完整响应:', res);
        
        if (res && res.statusCode === 200) {
          if (res.data && res.data.code === 0) {
            this.productDetail = res.data.data || this.getDefaultProductDetail();
            console.log('产品详情:', this.productDetail);
            console.log('图片1 URL:', this.productDetail.image1Url);
            console.log('图片2 URL:', this.productDetail.image2Url);
          } else {
            const errorMsg = res.data?.msg || '获取产品详情失败';
            console.error('业务错误:', errorMsg);
            uni.showToast({
              title: errorMsg,
              icon: 'none'
            });
            this.productDetail = this.getDefaultProductDetail();
          }
        } else {
          console.error('HTTP错误:', res.statusCode);
          uni.showToast({
            title: `HTTP错误: ${res.statusCode}`,
            icon: 'none'
          });
          this.productDetail = this.getDefaultProductDetail();
        }
      } catch (error) {
        console.error('加载产品详情异常:', error);
        uni.showToast({
          title: '加载失败: ' + (error.message || '未知错误'),
          icon: 'none'
        });
        this.productDetail = this.getDefaultProductDetail();
      } finally {
        this.loading = false;
      }
    },

    getDefaultProductDetail: function() {
      return {
        productSNo: this.productSNo || '',
        deviceId: '',
        communicationMode: '',
        clientId: '',
        username: '',
        password: '',
        installationLocation: '',
        applicationScenario: '',
        line10kvName: '',
        transformerName: '',
        transformerRatedCapacity: null,
        transformerRatio: null,
        lineNum: 0, // 默认出线数量为0
        line1Name: '',
        line1RatedCapacity: null,
        line1Ratio: null,
        line2Name: '',
        line2RatedCapacity: null,
        line2Ratio: null,
        line3Name: '',
        line3RatedCapacity: null,
        line3Ratio: null,
        line4Name: '',
        line4RatedCapacity: null,
        line4Ratio: null,
        line5Name: '',
        line5RatedCapacity: null,
        line5Ratio: null,
        line6Name: '',
        line6RatedCapacity: null,
        line6Ratio: null,
        line7Name: '',
        line7RatedCapacity: null,
        line7Ratio: null,
        line8Name: '',
        line8RatedCapacity: null,
        line8Ratio: null,
        image1Url: '',
        image2Url: '',
      };
    },
    
    // 选择出线数量
    selectOutletCount: function(count) {
      this.$set(this.productDetail, 'lineNum', count);
      console.log('选择出线数量:', count);
    },
    
    // 通信模式选择
    onCommunicationModeChange: function(e) {
      const index = e.detail.value;
      this.$set(this.productDetail, 'communicationMode', this.communicationModes[index]);
    },
    
    // 应用场景选择
    onApplicationScenarioChange: function(e) {
      const index = e.detail.value;
      this.$set(this.productDetail, 'applicationScenario', this.applicationScenarios[index]);
    },

    handleChooseImage: async function(imageIndex) {
      if (!this.productDetail) {
        uni.showToast({
          title: '请先加载产品信息',
          icon: 'none'
        });
        return;
      }
      try {
        const granted = await this._ensureImagePermissions();
        if (!granted) {
          return;
        }
        this._chooseImageImpl(imageIndex);
      } catch (e) {
        console.error('申请权限失败:', e);
        uni.showToast({ title: '没有相册/相机权限', icon: 'none' });
      }
    },

    _ensureImagePermissions: function() {
      return new Promise((resolve) => {
        // 非App端（如H5/小程序）直接通过
        if (typeof plus === 'undefined') {
          resolve(true);
          return;
        }
        try {
          const isAndroid = plus.os && plus.os.name === 'Android';
          if (!isAndroid) {
            resolve(true);
            return;
          }

          // Android 13+ 需要 READ_MEDIA_IMAGES；低版本需要 READ_EXTERNAL_STORAGE
          const versionStr = (plus.os && plus.os.version) ? String(plus.os.version) : '0';
          const major = parseInt(versionStr.split('.')[0] || '0');
          const perms = [];
          if (major >= 13) {
            perms.push('android.permission.READ_MEDIA_IMAGES');
          } else {
            perms.push('android.permission.READ_EXTERNAL_STORAGE');
            // 某些机型需要可写权限
            perms.push('android.permission.WRITE_EXTERNAL_STORAGE');
          }
          perms.push('android.permission.CAMERA');

          // 请求运行时权限
          if (plus.android && plus.android.requestPermissions) {
            plus.android.requestPermissions(perms, (result) => {
              const deniedAlways = (result && result.deniedAlways) || [];
              const denied = (result && result.denied) || [];
              if ((deniedAlways.length + denied.length) === 0) {
                resolve(true);
              } else {
                console.warn('权限被拒绝:', { deniedAlways, denied });
                uni.showModal({
                  title: '权限申请',
                  content: '需要相册/存储与相机权限以选择或拍摄图片，请前往设置开启权限。',
                  confirmText: '去设置',
                  success: (res) => {
                    if (res.confirm && uni.openAppAuthorizeSetting) {
                      uni.openAppAuthorizeSetting();
                    }
                  }
                });
                resolve(false);
              }
            }, (error) => {
              console.error('请求权限失败:', error);
              resolve(false);
            });
          } else {
            // 无法主动请求时，直接放行交由chooseImage自行处理
            resolve(true);
          }
        } catch (e) {
          console.warn('检查权限异常，放行到选择图片:', e);
          resolve(true);
        }
      });
    },

    _chooseImageImpl: function(imageIndex) {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          this.uploadImage(tempFilePath, imageIndex);
        },
        fail: (error) => {
          console.error('选择图片失败', error);
          uni.showToast({
            title: '选择图片失败',
            icon: 'none'
          });
        }
      });
    },

    uploadImage: function(filePath, imageIndex) {
      if (!this.productDetail) {
        uni.showToast({
          title: '请先加载产品信息',
          icon: 'none'
        });
        return;
      }
      
      this.loading = true;
      this._uploadImageImpl(filePath, imageIndex);
    },

    _uploadImageImpl: async function(filePath, imageIndex) {
      try {
        const token = uni.getStorageSync('token');
        console.log('开始上传图片:', filePath);
        
        const uploadRes = await new Promise((resolve, reject) => {
          uni.uploadFile({
            url: `${config.baseURL}/oss/upload`,
            filePath: filePath,
            name: 'file',
            header: {
              'Authorization': `Bearer ${token}`
            },
            success: (result) => {
              console.log('上传成功:', result);
              resolve(result);
            },
            fail: (error) => {
              console.error('上传失败:', error);
              reject(error);
            }
          });
        });

        console.log('上传响应:', uploadRes);
        
        if (uploadRes && uploadRes.statusCode === 200) {
          try {
            const data = JSON.parse(uploadRes.data);
            console.log('解析后的数据:', data);
            if (data.code === 0) {
              if (imageIndex === 1) {
                this.$set(this.productDetail, 'image1Url', data.data.url);
                console.log('设置图片1 URL成功:', data.data.url);
              } else if (imageIndex === 2) {
                this.$set(this.productDetail, 'image2Url', data.data.url);
                console.log('设置图片2 URL成功:', data.data.url);
              }
              
              // 保存图片URL到数据库
              await this.saveImageUrlToDatabase(imageIndex, data.data.url);
              
              uni.showToast({
                title: '上传成功',
                icon: 'success'
              });
            } else {
              uni.showToast({
                title: data.msg || '上传失败',
                icon: 'none'
              });
            }
          } catch (parseError) {
            console.error('JSON解析失败:', parseError);
            console.log('原始响应数据:', uploadRes.data);
            uni.showToast({
              title: '响应格式错误',
              icon: 'none'
            });
          }
        } else {
          console.error('上传HTTP错误:', uploadRes.statusCode, uploadRes.data);
          uni.showToast({
            title: `上传失败: ${uploadRes.statusCode}`,
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('上传图片异常:', error);
        uni.showToast({
          title: '上传失败: ' + (error.message || '未知错误'),
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },

    saveImageUrlToDatabase: async function(imageIndex, imageUrl) {
      try {
        console.log('开始保存图片URL到数据库');
        console.log('产品序列号:', this.productDetail.productSNo);
        console.log('图片索引:', imageIndex);
        console.log('图片URL:', imageUrl);
        
        const updateData = {
          productSNo: this.productDetail.productSNo
        };
        
        if (imageIndex === 1) {
          updateData.image1Url = imageUrl;
        } else if (imageIndex === 2) {
          updateData.image2Url = imageUrl;
        }
        
        console.log('准备更新的数据:', updateData);
        
        const token = uni.getStorageSync('token');
        const res = await new Promise((resolve, reject) => {
          uni.request({
            url: `${config.baseURL}/productDetail/save`,
            method: 'POST',
            data: updateData,
            header: {
              'Authorization': `Bearer ${token}`,
              'Content-Type': 'application/json'
            },
            success: (result) => {
              console.log('保存图片URL成功:', result);
              resolve(result);
            },
            fail: (error) => {
              console.error('保存图片URL失败:', error);
              reject(error);
            }
          });
        });
        
        if (res && res.statusCode === 200 && res.data && res.data.code === 0) {
          console.log('图片URL保存成功');
        } else {
          console.error('图片URL保存失败:', res);
        }
      } catch (error) {
        console.error('保存图片URL异常:', error);
      }
    },

    handleDeleteImage: function(imageIndex) {
      if (!this.productDetail) return;
      
      this._deleteImageImpl(imageIndex);
    },

    _deleteImageImpl: function(imageIndex) {
      uni.showModal({
        title: '提示',
        content: '确定要删除这张图片吗？',
        success: (res) => {
          if (res.confirm) {
            if (imageIndex === 1) {
              this.$set(this.productDetail, 'image1Url', '');
              // 删除后也更新数据库
              this.saveImageUrlToDatabase(1, '');
            } else if (imageIndex === 2) {
              this.$set(this.productDetail, 'image2Url', '');
              // 删除后也更新数据库
              this.saveImageUrlToDatabase(2, '');
            }
          }
        }
      });
    },

    saveProduct: function() {
      if (!this.productDetail) {
        uni.showToast({
          title: '请先加载产品信息',
          icon: 'none'
        });
        return;
      }
      
      this.loading = true;
      this._saveProductImpl();
    },

    _saveProductImpl: async function() {
      try {
        const token = uni.getStorageSync('token');
        console.log('保存数据:', this.productDetail);
        
        const res = await new Promise((resolve, reject) => {
          uni.request({
            url: `${config.baseURL}/productDetail/save`,
            method: 'POST',
            data: this.productDetail,
            header: {
              'Authorization': `Bearer ${token}`,
              'Content-Type': 'application/json'
            },
            success: (result) => {
              console.log('保存成功:', result);
              resolve(result);
            },
            fail: (error) => {
              console.error('保存失败:', error);
              reject(error);
            }
          });
        });

        console.log('保存响应:', res);
        
        if (res && res.statusCode === 200) {
          if (res.data && res.data.code === 0) {
            uni.showToast({
              title: '保存成功',
              icon: 'success'
            });
            setTimeout(() => {
              // 返回产品列表并刷新
              this.navigateBackAndRefresh();
            }, 1000);
          } else {
            const errorMsg = res.data?.msg || '保存失败';
            uni.showToast({
              title: errorMsg,
              icon: 'none'
            });
          }
        } else {
          uni.showToast({
            title: `保存失败: ${res.statusCode}`,
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('保存产品信息异常:', error);
        uni.showToast({
          title: '保存失败: ' + (error.message || '未知错误'),
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },

    viewWiringDiagram: function() {
      if (this.productDetail && this.productDetail.productSNo) {
        uni.navigateTo({
          url: `/pages/wiring-diagram/wiring-diagram?productSNo=${encodeURIComponent(this.productDetail.productSNo)}`
        });
      } else {
        uni.showToast({
          title: '产品信息不完整',
          icon: 'none'
        });
      }
    },
    
    // 返回并刷新产品列表
    navigateBackAndRefresh() {
      // 设置一个标记，表示需要刷新
      uni.setStorageSync('needRefreshProductList', true);
      uni.navigateBack({ delta: 1 });
    }
  }
};
</script>

<style scoped>
/* 样式保持不变 */
.edit-container {
  min-height: 100vh;
  background-color: #f8f9fa;
  position: relative;
}

.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loading-content {
  background-color: #fff;
  padding: 30rpx 60rpx;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-text {
  font-size: 28rpx;
  color: #666;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
  padding: 0 30rpx;
  background-color: #2980ff;
  color: #fff;
  box-sizing: border-box;
  z-index: 1000;
  position: relative;
}

.nav-left {
  display: flex;
  align-items: center;
  font-size: 28rpx;
}

.back-icon {
  margin-right: 10rpx;
  font-size: 32rpx;
}

.title {
  font-size: 36rpx;
  font-weight: 500;
}

.nav-right {
  width: 60rpx;
}

.sticky-actions {
  position: sticky;
  top: 0;
  background-color: #fff;
  padding: 20rpx;
  z-index: 999;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 20rpx;
  border-radius: 16rpx;
}

.action-buttons {
  display: flex;
  gap: 20rpx;
}

.primary-btn, .secondary-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
  border-radius: 8rpx;
  border: none;
}

.primary-btn {
  background-color: #2980ff;
  color: #fff;
}

.secondary-btn {
  background-color: #fff;
  color: #2980ff;
  border: 1px solid #2980ff;
}

.form-container {
  height: calc(100vh - 100rpx);
}

.form-content {
  padding: 20rpx;
}

.form-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.section-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 20rpx;
  padding-bottom: 10rpx;
  border-bottom: 1px solid #f0f0f0;
}

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.form-item:last-child {
  margin-bottom: 0;
}

.label {
  font-size: 28rpx;
  color: #666;
  width: 200rpx;
  flex-shrink: 0;
}

.input {
  flex: 1;
  height: 70rpx;
  padding: 0 20rpx;
  border: 1px solid #e0e0e0;
  border-radius: 8rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.picker-input {
  flex: 1;
}

.picker-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70rpx;
  padding: 0 20rpx;
  border: 1px solid #e0e0e0;
  border-radius: 8rpx;
  background-color: #fff;
  box-sizing: border-box;
}

.picker-text {
  font-size: 28rpx;
  color: #333;
}

.picker-arrow {
  font-size: 24rpx;
  color: #999;
}

.image-upload-section {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.image-item {
  display: flex;
  flex-direction: column;
}

.image-label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.image-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200rpx;
  border: 2px dashed #e0e0e0;
  border-radius: 8rpx;
  background-color: #fafafa;
}

.upload-text {
  font-size: 60rpx;
  color: #ccc;
  margin-bottom: 10rpx;
}

.upload-hint {
  font-size: 24rpx;
  color: #999;
}

.image-preview {
  position: relative;
}

.preview-image {
  width: 100%;
  height: 300rpx;
  border-radius: 8rpx;
}

.image-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 10rpx;
}

.action-btn {
  flex: 1;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 24rpx;
  margin: 0 5rpx;
  border-radius: 8rpx;
}

.delete-btn {
  background-color: #ff4757;
  color: #fff;
}

/* 出线数量选择器样式 */
.outlet-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-top: 10rpx;
  padding: 15rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
  border: 1px solid #e9ecef;
}

.outlet-option {
  padding: 12rpx 20rpx;
  font-size: 28rpx;
  color: #495057;
  background-color: #fff;
  border-radius: 8rpx;
  border: 2rpx solid #dee2e6;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 80rpx;
  text-align: center;
  font-weight: 500;
}

.outlet-option:active {
  transform: scale(0.95);
}

.outlet-option.active {
  background-color: #2980ff;
  color: #fff;
  border-color: #2980ff;
  box-shadow: 0 2rpx 8rpx rgba(41, 128, 255, 0.3);
}

/* 线路配置区域样式 */
.line-config-section {
  margin-top: 20rpx;
  padding: 20rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
  border: 1px solid #e9ecef;
}

.line-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #2980ff;
  margin-bottom: 15rpx;
  padding-bottom: 10rpx;
  border-bottom: 2rpx solid #2980ff;
}
</style>